<template>
	<view>
		<view class="goumai" id="cbox" v-if="type == 'goumai'">
			立即购买
		</view>
		<view class="goumai" id="cbox" v-else-if="type == 'yinhang'">
			下一步
		</view>
		<view class="goumai" id="cbox" v-else-if="type == 'mima'">
			提交
		</view>
		<view v-else id="cbox" :style="'color:'+color">发送验证码</view>
	</view>
</template>

<script>
	export default {
		props: {
			color:{
				type: String,
				default:'#73FAB5'
			},
			type:{
				type: String,
				default:''
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				var _this = this;
				new YpRiddler({
					expired: 10,
					mode: 'dialog',
					winWidth: "100%",
					lang: 'zh-cn',
					container: document.getElementById('cbox'),
					noButton: true,
					appId: 'ea45947ff0c8455797a262fb8b683469',
					version: 'v1',
					onError: function(param) {
						if (!param.code) {
							console.error('错误请求');
						} else if (parseInt(param.code / 100) == 5) {
							// 服务不可用时，开发者可采取替代方案，详见 “get 接口响应码释义”
							console.error('验证服务暂不可用');
						} else if (param.code == 429) {
							console.warn('请求过于频繁，请稍后再试');
						} else if (param.code == 403) {
							console.warn('请求受限，请稍后再试');
						} else if (param.code == 400) {
							console.warn('非法请求，请检查参数');
						}
						// 异常回调
						console.error('验证服务异常')
					},
					onSuccess: function(validInfo, close, useDefaultSuccess) {
						_this.$emit("click", validInfo);
						// 成功回调
						// alert('验证通过! token=' + validInfo.token + ', authenticate=' + validInfo.authenticate)
						// 验证成功默认样式
						useDefaultSuccess(true)
						close()
					},
					onFail: function(code, msg, retry) {
						// 失败回调
						// alert('出错啦：' + msg + ' code: ' + code)
						retry()
					},
					beforeStart: function(next) {
						// console.log('验证马上开始')
						next()
					},
					onExit: function() {
						// 退出验证 （仅限dialog模式有效）
						console.log('退出验证')
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	#cbox {
		color: #73FAB5;
		font-size: 28rpx;
		font-weight: 400;
		// border-bottom: 1px solid #000;
	}
	.goumai{
		width: 100%;
		height: 88rpx;
		background: linear-gradient(90deg, #9394F3 0%, #82E7CB 54%, #22FC94 100%);
		border-radius: 8rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold !important;
		color: #232323 !important;
	}
</style>
